<template>
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
      size="default">
      <el-row>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="所有班级" prop="allClasses" class="required label-center-align">
            <el-select v-model="formData.allClasses" class="full-width-input" clearable filterable>
              <el-option v-for="(item, index) in allClassesOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="指定班级" prop="specifyClass" class="required label-center-align">
            <el-select v-model="formData.specifyClass" class="full-width-input" clearable filterable>
              <el-option v-for="(item, index) in specifyClassOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </template>
  <script>
    export default {
      components: {},
      props: {},
      data() {
        return {
          formData: {
            allClasses: 3,
            specifyClass: 1,
          },
          rules: {
            allClasses: [{
              required: true,
              message: '字段值不可为空',
            }],
            specifyClass: [{
              required: true,
              message: '字段值不可为空',
            }],
          },
          allClassesOptions: [{
            "label": "Python",
            "value": 1
          }, {
            "label": "测试班级",
            "value": 2
          }, {
            "label": "沙雕聚集班",
            "value": 3
          }, {
            "value": 4,
            "label": "猛男训练班"
          }],
          specifyClassOptions: [{
            "label": "Java班",
            "value": 1
          }, {
            "label": "BigData班",
            "value": 2
          }, {
            "label": "Vue内训班",
            "value": 3
          }],
        }
      },
      computed: {},
      watch: {},
      created() {},
      mounted() {},
      methods: {
        submitForm() {
          this.$refs['vForm'].validate(valid => {
            if (!valid) return
            //TODO: 提交表单
          })
        },
        resetForm() {
          this.$refs['vForm'].resetFields()
        }
      }
    }
    
  </script>
  
  <style lang="scss">
    .el-input-number.full-width-input,
    .el-cascader.full-width-input {
      width: 100% !important;
    }
    
    .el-form-item--medium {
      .el-radio {
        line-height: 36px !important;
      }
      
      .el-rate {
        margin-top: 8px;
      }
    }
    
    .el-form-item--small {
      .el-radio {
        line-height: 32px !important;
      }
      
      .el-rate {
        margin-top: 6px;
      }
    }
    
    .el-form-item--mini {
      .el-radio {
        line-height: 28px !important;
      }
      
      .el-rate {
        margin-top: 4px;
      }
    }
    
    .clear-fix:before,
    .clear-fix:after {
      display: table;
      content: "";
    }
    
    .clear-fix:after {
      clear: both;
    }
    
    .float-right {
      float: right;
    }
    
  </style>
  
  <style lang="scss" scoped>
    div.table-container {
      table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
  
        td.table-cell {
          display: table-cell;
          height: 36px;
          border: 1px solid #e1e2e3;
        }
      }
    }
    
    .label-left-align ::v-deep .el-form-item__label {
      text-align: left;
    }
    
    .label-center-align ::v-deep .el-form-item__label {
      text-align: center;
    }
    
    .label-right-align ::v-deep .el-form-item__label {
      text-align: right;
    }

    .static-content-item {
      min-height: 20px;
      display: flex;
      align-items: center;
  
      ::v-deep .el-divider--horizontal {
        margin: 0;
      }
    }
    
  </style>